<template>
  <div>
    <div class="box" />
    <img ref="myImg" src="" alt="">
  </div>
</template>

<script>
export default {
  mounted() {
    // 图片懒加载 加载到图片的位置了才显示 为0的区域不加载图片
    const intersectionObserver = new IntersectionObserver((entries) => {
      const url = 'https://img2.baidu.com/it/u=1058569036,1658382901&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889'
      // console.log(entries[0].intersectionRatio)
      // entries[0].intersectionRatio 如果是0 不在可视区域 不是0在可视区域了
      if (entries[0].intersectionRatio <= 0) return
      this.$refs.myImg.src = url // 给img图片赋值
    })
    // 开始监听
    intersectionObserver.observe(this.$refs.myImg)
  }
}
</script>

<style lang="scss" scoped>
.box{
  height: 2000px;
  background-color: pink;
}
</style>
